<template>
  <div class="app-container">
    <h1>Morghulis 组件库测试</h1>
    
    <div class="section">
      <h2>对话框组件测试</h2>
      <el-button type="primary" @click="openDialog">打开对话框</el-button>
      
      <MDialog 
        v-model="dialogVisible"
        title="测试对话框"
        subTitle="这是一个通过Morghulis创建的对话框"
        :width="600"
        :modal="true"
        confirmButtonText="确认"
        cancelButtonText="取消"
        @close="onDialogClose"
        ref="dialogRef"
      >
        <p>这是对话框的内容，您可以在这里放置任何内容。</p>
        <p>测试属性和事件是否正常运行。</p>
      </MDialog>
    </div>

    <div class="section">
      <h2>模拟数据表格 (使用本地数据)</h2>
      <DTable
        :db="mockDao"
        entity="users"
        :code="mockMetaView.code"
        :size="3"
        :page="1"
        ref="mockTableRef"
      />
    </div>

    <div class="section">
      <h2>ORM数据表格 (使用真实后端)</h2>
      <el-switch v-model="useRealAPI" active-text="启用" inactive-text="禁用" />
      
      <DTable
        v-if="useRealAPI"
        db="orm"
        entity="data.Vala"
        :size="10"
        :page="1"
        ref="realTableRef"
      />
      <div v-else class="placeholder">
        <el-alert
          title="请启用开关连接到真实后端API"
          type="info"
          :closable="false"
        />
        <p class="placeholder-hint">此组件将直接连接到后端API: http://127.0.0.1:8000</p>
      </div>
    </div>
    
    <div class="section">
      <h2>授权功能测试</h2>
      <el-card class="auth-card">
        <template #header>
          <div class="card-header">
            <span>授权状态</span>
          </div>
        </template>
        
        <div v-if="!isLoggedIn">
          <p>当前未登录</p>
          <el-button type="primary" @click="login">登录</el-button>
        </div>
        <div v-else>
          <p>已登录用户: {{ currentUser }}</p>
          <p>Token: {{ authToken }}</p>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
      </el-card>
    </div>
    
    <div class="section api-settings">
      <h2>API配置参考</h2>
      <p>Vite代理配置:</p>
      <pre>
proxy: {
  '/api': {
    target: 'http://127.0.0.1:8000',
    changeOrigin: true,
    ws: true,
    rewrite: path => path.replace(/^\/api/, '')
  }
}
      </pre>
      
      <p>createMorghulis配置:</p>
      <pre>
app.use(createMorghulis({
  baseURL: '/api/',
  minioURL: '/dfs/'
}))
      </pre>
      
      <p>DTable组件用法:</p>
      <pre>
&lt;DTable
  db="orm"
  entity="data.Vala"
  :size="10"
  :page="1"
/>
      </pre>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useMorghulisAuthorize } from 'morghulis'
import { mockDao, mockMetaView } from './mock-api'

// 对话框相关
const dialogVisible = ref(false)
const dialogRef = ref<any>(null)

const openDialog = () => {
  dialogVisible.value = true
}

const onDialogClose = () => {
  console.log('对话框已关闭')
}

// 表格相关
const useRealAPI = ref(false)
const mockTableRef = ref()
const realTableRef = ref()

// 用户授权相关
const auth = useMorghulisAuthorize()
const isLoggedIn = ref(false)
const currentUser = ref('')
const authToken = ref('')

const checkAuthStatus = () => {
  isLoggedIn.value = !!auth.user()
  currentUser.value = auth.user() || ''
  authToken.value = auth.bearer() || ''
}

const login = () => {
  const userId = 'user_' + Date.now()
  auth.login(userId)
  checkAuthStatus()
}

const logout = () => {
  auth.logout()
  checkAuthStatus()
}

onMounted(() => {
  checkAuthStatus()
})
</script>

<style>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.section {
  margin-bottom: 40px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #409EFF;
}

h2 {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.auth-card {
  width: 100%;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.placeholder {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
  margin-top: 10px;
}

.placeholder-hint {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.api-settings {
  background-color: #f8f9fa;
}

.api-settings pre {
  background-color: #f1f1f1;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  margin: 10px 0;
}
</style> 